<template>
  <div class="setting page">
    <van-nav-bar
        left-arrow
        title="系统设置"
        @click-left="$router.back()"
    />
    <div class="items">
      <div class="item van-hairline--bottom" @click="$router.push({ name: 'Information'})">
        <div class="left">基本信息设置</div>
        <div class="right"><i class="van-badge__wrapper van-icon van-icon-arrow"
        ></i></div>
      </div>
      <div class="item van-hairline--bottom" @click="$router.push({ name: 'EditPassword'})">
        <div class="left">登录密码</div>
        <div class="right"><i class="van-badge__wrapper van-icon van-icon-arrow"
        ></i></div>
      </div>
      <div class="item van-hairline--bottom" @click="$router.push({ name: 'Capital'})">
        <div class="left">资金密码</div>
        <div class="right"><span v-if="userInfo.is_paypassword">已设置</span><i
            class="van-badge__wrapper van-icon van-icon-arrow"></i>
        </div>
      </div>
    </div>
    <van-button class="sign-out" @click="gotoLogout">退出登录</van-button>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {Toast} from "vant";

export default {
  name: "Setting",
  computed: mapGetters(["userInfo"]),
  methods: {
    gotoLogout: function () {
      let that = this;
      Toast.loading({
        message: "正在退出,请稍后",
        forbidClick: true,
        duration: 0,
        onOpened: function () {
          that.$store.dispatch("Logout").then(v => {
            Toast.clear();
            that.$router.push({
              name: "Index"
            })
          }).catch(() => {
            Toast.clear();
          })
        }
      })
    }
  }
};
</script>
<style scoped>
::v-deep .van-icon {
  color: var(--van-nav-bar-icon-color);
}

::v-deep .van-nav-bar__title {
  color: var(--van-nav-bar-title-text-color);
  font-weight: bolder;
}

.setting {
  background-color: #fcf0fa;
  height: 100%
}

.setting .nav {
  background: linear-gradient(90deg, #fff, #fff)
}

.setting .items {
  background-color: #f5dcf1;
  font-size: .37333rem;
  color: #000;
  padding: 0 .37333rem
}

.setting .items .item {
  padding: .37333rem 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center
}

.setting .items .item .van-icon, .setting .items .item span {
  color: #979799
}

.setting .sign-out {
  margin: 2.66667rem .4rem 0;
  width: calc(100% - .8rem);
  height: 1.22667rem;
  line-height: 1.22667rem;
  border-radius: .66667rem;
  color: #fff;
  font-size: .42667rem;
  font-weight: bolder;
  border: none;
  background: linear-gradient(270deg, #fa59b5, #e38afb)
}

</style>
